<template>
    <div>
        <!-- <div class="echartBox">
            <Echart :height="'350px'" :width="'100%'" :option="option" />
        </div> -->
        <div class="tableBox">
            <el-table :data="tableDatas" border :span-method="spanMethod" size="mini">
                <el-table-column prop="gysmc" align="center" label="供应商" />
                <el-table-column prop="mbqy" align="center" label="目标企业" :show-overflow-tooltip="true" />
                <el-table-column prop="khmc" align="center" label="客户" :show-overflow-tooltip="true" />
            </el-table>
        </div>
    </div>
</template>


<script>
import Echart from '@/components/echart'
export default {
    name: 'Xszst',
    components: { Echart },
     props: {
        rowData: {
            type: Array, default: function () {
                return []
            }
        },
       

    },
    data() {
        return {
            loading: false,
            nodes: [{
                name: "现代投资股份有限公司",
                id: "1",
                symbolSize: 80, //节点大小
                symbol: 'circle', //节点形状，'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'也可'image://url'设置节点图片
                x: 400,
                y: 200
            }, {
                name: "湖南省交通建设质量监督检测有限公司",
                id: "2",
                symbolSize: 80,
                x: 100,
                y: 120,
                y: 120
            }, {
                name: "北京新大信工程造价咨询有限公司",
                id: "3",
                symbolSize: 80,
                x: 120,
                y: 200
            }, {
                name: "湖南现代投资资产经营管理有限公司",
                id: "4",
                symbolSize: 80,
                x: 80,
                y: 280
            }, {
                name: "长沙市武广新城开发建设有限责任公司",
                id: "5",
                symbolSize: 80,
                x: 780,
                y: 120
            }, {
                name: "大有期货有限公司",
                id: "6",
                symbolSize: 80,
                x: 680,
                y: 200
            }, {
                name: "湖南现代环境科技股份有限公司",
                id: "7",
                symbolSize: 80,
                x: 780,
                y: 280
            }],


            links: [{
                source: "2",
                target: "1",
                relation: {
                    name: "",
                    id: "1",
                },
            }, {
                source: "3",
                target: "1",
                relation: {
                    name: "",
                    id: "1",
                },
            }, {
                source: "4",
                target: "1",
                relation: {
                    name: "",
                    id: "1",
                },
            }, {
                source: "1",
                target: "5",
                relation: {
                    name: "",
                    id: "1",
                },
            }, {
                source: "1",
                target: "6",
                relation: {
                    name: "",
                    id: "1",
                },
            }, {
                source: "1",
                target: "7",
                relation: {
                    name: "",
                    id: "1",
                },
            }],
            
            option: {},

            tableDatas: [
                
            ]
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        rowData: {
            handler(newVal, oldVal) {
                // this.initChart(newVal)
                this.tableDatas = newVal
                console.log('user对象发生了变化', newVal, oldVal);
            },
            deep: true,
            immediate: true
        }
    },
    methods: {

        init() {
            this.option = {
                grid: {
                    right: '5%',
                    top: '13%',
                    bottom: '12%'
                },

                series: [{
                    type: 'graph',
                    layout: 'none',
                    nodes: this.nodes,
                    links: this.links,
                    nodeStyle: {
                        fill: 'red', // 节点填充色
                        // 其他样式...
                    },
                    itemStyle: {
                        color: '#fc5531'
                    },
                    label: {
                        normal: {
                            show: true,
                            distance: 5,
                            fontSize: 14,
                            align: "center",
                            color: '#fff',
                            textBorderColor: 'red',
                            textBorderWidth: 2
                            // textShadowColor: 'red'
                        }

                    },
                    // autoCurveness: [1, 3], //多条边的时候，自动计算曲率
                    edgeLabel: { //边的设置
                        show: true,
                        position: "middle",
                        fontSize: 12,
                        color: '#000',
                        formatter: (params) => {
                            return params.data.relation.name;
                        },
                    },
                    edgeSymbol: ["circle", "arrow"], //边两边的类型
                    // lineStyle: {
                    //     curveness: .3
                    // },
                    force: {
                        repulsion: 100,
                        gravity: 0.01,
                        edgeLength: 200
                    }
                },],
            }
        },
        spanMethod({row, column, rowIndex, columnIndex}) {
            //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
            const fields = ['mbqy']   // 直接在里面添加需要合并的字段
            // 判断只合并定义字段的列数据
            // 当前行的数据
            const cellValue = row[column.property]
            let countRowspan = 1 //用于合并计数多少单元格
            if (cellValue && fields.includes(column.property)) {
                const prevRow = this.tableDatas[rowIndex - 1] //上一行数据
                let nextRow = this.tableDatas[rowIndex + 1] //下一行数据

                // 当上一行的数据等于当前行数据时，当前行单元格隐藏
                if (prevRow && prevRow[column.property] === cellValue && prevRow.declareRegion == row.declareRegion) {
                    return { rowspan: 0, colspan: 0 }
                } else {
                    // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
                    while (nextRow && nextRow[column.property] === cellValue && nextRow.declareRegion == row.declareRegion) {
                        nextRow = this.tableDatas[++countRowspan + rowIndex]
                    }
                    if (countRowspan > 1) {
                        return { rowspan: countRowspan, colspan: 1 }
                    }
                }
            }
        }

    }
}
</script>


<style lang="scss" scoped>
.echartBox {
    margin-bottom: 15px;
    border: 1px solid rgb(221, 221, 221);
}
</style>